<!--
 @description 联系人编辑/新增
 @fileName Item.vue
 @author zengqiongying
 @created 2023/04/28 14:36:41
-->
<template>
  <div>
    <template v-if="showShop">
      <template v-if="readonlyFields.includes('shopBusinessId') || readonlyFields.includes('shopName')">
        <Cell :modelValue="modelValue.shopName" title="门店名称" readonly defaultValue="--" />
      </template>
      <template v-else>
        <FieldPicker
          v-model="formData.shopBusinessId"
          v-model:label="formData.shopName"
          title="门店名称"
          placeholder="请选择"
          label-name="name"
          value-name="id"
          :option-data="shopOptions"
          clear
          required
        />
      </template>
    </template>
    <template v-if="readonlyFields.includes('name')">
      <Cell :modelValue="modelValue.name" title="联系人姓名" readonly defaultValue="--" />
    </template>
    <template v-else>
      <Cell
        v-if="!hideName"
        v-model="formData.name"
        title="联系人姓名"
        placeholder="请输入"
        :maxlength="10"
        :right="false"
        is-input
        required
        inputAlign="right"
      />
    </template>
    <template v-if="readonlyFields.includes('contactTypeName') || readonlyFields.includes('contactTypeCode')">
      <Cell :modelValue="modelValue.contactTypeName" title="联系人类别" readonly defaultValue="--" />
    </template>
    <template v-else>
      <FieldPicker
        v-model="formData.contactTypeCode"
        v-model:label="formData.contactTypeName"
        title="联系人类别"
        placeholder="请选择"
        label-name="name"
        value-name="code"
        :option-data="contactTypes"
        clear
        required
      />
    </template>
    <Cell
      v-model="formData.contactTel"
      title="联系人电话"
      placeholder="请输入"
      :maxlength="20"
      :right="false"
      is-input
      inputAlign="right"
      type="tel"
    />
    <Cell
      v-model="formData.contactPhone"
      title="联系人手机"
      placeholder="请输入"
      :maxlength="11"
      :right="false"
      type="tel"
      is-input
      required
      inputAlign="right"
    />
    <Cell
      v-model="formData.contactFax"
      title="联系人传真"
      placeholder="请输入"
      :maxlength="20"
      :right="false"
      is-input
      inputAlign="right"
    />
    <Cell
      v-model="formData.email"
      title="联系人邮箱"
      placeholder="请输入"
      :maxlength="30"
      :right="false"
      :required="emailRequired"
      is-input
      inputAlign="right"
    />
    <Cell
      v-model="formData.address"
      title="联系人地址"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
    />
  </div>
</template>

<script>
  import { reactive, toRefs, defineComponent, watch } from 'vue'
  import Cell from '@/components/Cell/index.vue'
  import FieldPicker from '@/components/FieldPicker/index.vue'
  import { initFormData } from '@/utils'
  export default defineComponent({
    name: 'DealerCustomerContactsItem',
    components: { Cell, FieldPicker },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      hideName: {
        type: Boolean,
        default: false
      },
      contactTypes: {
        type: Array,
        default: () => []
      },
      emailRequired: {
        type: Boolean,
        default: false
      },
      readonlyFields: {
        // 只读字段
        type: Array,
        default: () => []
      },
      shopOptions: {
        // 可选择的门店选项
        type: Array,
        default: () => []
      },
      showShop: {
        type: Boolean,
        default: false
      }
    },
    setup(props, { emit }) {
      const datas = reactive({
        formData: {
          customerCode: '',
          name: '',
          shopBusinessId: '',
          shopName: '',
          contactTypeCode: '',
          contactTypeName: '',
          contactTel: '',
          contactPhone: '',
          contactFax: '',
          email: '',
          address: ''
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          initFormData(d, datas.formData)
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (d) => {
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      return {
        ...toRefs(datas)
      }
    }
  })
</script>
<style lang="less" scoped></style>
